<template>
  <div class="merchant-detail-container">
    <div class="register-main">
      <div v-if="$route.query.origin == 'jumpFromArchiveModifyList' && goodsDiffList.length>0">
        <div class="title">商品档案变更</div>
          <el-table :data="goodsDiffList" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column align="center" prop="fieldName" label="变更字段" min-width="100"></el-table-column>
            <el-table-column align="center" prop="beforeValue" label="变更前" min-width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.fieldType=='ordinary'">{{scope.row | changeFieldType('before')}}</span>
                <el-link @click="viewChangeDetail(scope.row)" v-else type="primary">
                  {{scope.row | changeFieldType('before')}}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="afterValue" label="变更后" min-width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.fieldType=='ordinary'">{{scope.row | changeFieldType('after')}}</span>
                <el-link @click="viewChangeDetail(scope.row)" v-else type="primary">
                  {{scope.row | changeFieldType('after')}}
                </el-link>
              </template>
            </el-table-column>
          </el-table>
        <div>
          <el-dialog title="变更详情" :visible.sync="changelVisible" :before-close="handleClose">
            <el-row>
              <el-col :span="12"><div>变更前</div></el-col>
              <el-col :span="12"><div>变更后</div></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div v-if="changeDataDetail.fieldType=='file' && changeDataDetail.beforeValue">
                  <img v-if="changeDataDetail.beforeValue.lastIndexOf('.pdf')<0 && changeDataDetail.beforeValue.lastIndexOf('.xls')<0 && changeDataDetail.beforeValue.lastIndexOf('.xlsx')<0" class="img-class" :src="changeDataDetail.beforeValue" />
                  <el-link v-else type="primary" @click="previewFileView(changeDataDetail.beforeValue)" >查看文件</el-link>
                </div>
              </el-col>
              <el-col :span="12">
                <div v-if="changeDataDetail.fieldType=='file' && changeDataDetail.afterValue">
                  <img v-if="changeDataDetail.afterValue.lastIndexOf('.pdf')<0 && changeDataDetail.afterValue.lastIndexOf('.xls')<0 && changeDataDetail.afterValue.lastIndexOf('.xlsx')<0" class="img-class" :src="changeDataDetail.afterValue" />
                  <el-link v-else type="primary" @click="previewFileView(changeDataDetail.afterValue)">查看文件</el-link>
                </div>
              </el-col>
            </el-row>
          </el-dialog>
        </div>
      </div>
      <el-form class="el-form--label-left" :label-position="labelPosition" label-width="80px" :model="formData" ref="formData" :rules="formRules">
        <div v-if="showEditBtn" class="operate-btn">
          <el-button @click="backList">返回</el-button>
          <el-button type="primary" :loading="loading" @click="submitUpdateApply">保存</el-button>
        </div>
        <div class="title">
          基本信息
        </div>
        <el-form-item v-show="false" label="企业名称" prop="id" label-width="150px">
          <el-input type="hidden" v-model="formData.id"></el-input>
        </el-form-item>
        <el-form-item label="企业名称" prop="companyName" label-width="150px">
          <el-input :disabled="true" v-model="formData.companyName"></el-input>
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="socialCreditCode" label-width="150px">
          <el-input :disabled="true" v-model="formData.socialCreditCode"></el-input>
        </el-form-item>
        <el-form-item label="企业所在地" prop="location" label-width="150px">
          <el-cascader :disabled="!showEditBtn" v-model="cityAddress" :options="cityOptions" @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="detailAddress" label-width="150px">
          <el-input :disabled="!showEditBtn" v-model="formData.detailAddress"></el-input>
        </el-form-item>
        <el-form-item label="是否对接招商人员" prop="haveJoin" label-width="150px">
          <el-radio-group :disabled="true" v-model="formData.haveJoin">
            <el-radio :label="true">有</el-radio>
            <el-radio :label="false">无</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="对接招商人员" prop="joinPerson" label-width="150px">
          <el-select :disabled="true" v-model="formData.joinPerson" placeholder="请选择">
            <el-option v-for="item in joinPersons" :key="item.value" :label="item.joinName" :value="item.joinCode"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业性质" prop="companyNature" label-width="150px">
          <el-select :disabled="!showEditBtn" v-model="formData.companyNature" placeholder="请选择">
            <el-option v-for="item in companyNatureOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业类型" prop="companyType" label-width="150px">
          <el-select :disabled="!showEditBtn" v-model="formData.companyType" placeholder="请选择">
            <el-option v-for="item in companyTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务联系人" prop="contact" label-width="150px">
          <el-input :disabled="!showEditBtn" v-model="formData.contact"></el-input>
        </el-form-item>
        <el-form-item label="联系人职位" prop="position" label-width="150px">
          <el-input :disabled="!showEditBtn" v-model="formData.position"></el-input>
        </el-form-item>
        <el-form-item label="联系邮箱" prop="email" label-width="150px">
          <el-input :disabled="!showEditBtn" v-model="formData.email"></el-input>
        </el-form-item>
        <el-form-item label="联系人手机" prop="mobile" label-width="150px">
          <el-input :disabled="!showEditBtn" v-model="formData.mobile"></el-input>
        </el-form-item>
        <el-form-item label="结算周期" prop="settleCycle" label-width="150px">
          <el-select :disabled="!showEditBtn" v-model="formData.settleCycle" placeholder="请选择">
            <el-option v-for="item in settleCycleSelect" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <div class="title">
          企业资质
        </div>
        <el-form-item label="营业执照副本" prop="businessLicenseUrl" label-width="150px">
          <el-upload
            :disabled="!showEditBtn"
            class="upload"
            :action="upladUrl"
            :file-list="fileLists.businessLicenseUrl"
            :on-success="businessLicenseUrlHandle"
            :before-upload="handlePreview"
            :on-preview="previewFile"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :multiple="false"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">上传文件</el-button>
            <div slot="tip" class="el-upload__tip">加盖公司公章，支持pdf、png、jpg格式文件，大小需小于5M</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="纳税人类型" prop="taxType" label-width="150px">
          <el-radio-group :disabled="!showEditBtn" v-model="formData.taxType">
            <el-radio label="GENERAL">一般纳税人</el-radio>
            <el-radio label="SMALL">小规模纳税人</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="taxTypeShow" label="一般纳税人资质" prop="taxUrl" label-width="150px">
          <el-upload
            :disabled="!showEditBtn"
            class="upload"
            :action="upladUrl"
            :file-list="fileLists.taxUrl"
            :on-success="taxUrlHandle"
            :before-upload="handlePreview"
            :on-preview="previewFile"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :multiple="false"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">上传文件</el-button>
            <div slot="tip" class="el-upload__tip">加盖公司公章，支持pdf、png、jpg格式文件，大小需小于5M</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="注册资金(万)" prop="registerCapital" label-width="150px">
          <el-input :disabled="!showEditBtn" oninput="value=value.replace(/[^\d]/g,'')" maxlength="8" v-model="formData.registerCapital"></el-input>
        </el-form-item>
        <div class="title">
          法人信息
        </div>
        <el-form-item label="企业法人" prop="realName" label-width="150px">
          <el-input :disabled="!showEditBtn" v-model="formData.realName"></el-input>
        </el-form-item>
        <el-form-item label="法人身份证号" prop="idNumber" label-width="150px">
          <el-input :disabled="!showEditBtn" v-model="formData.idNumber"></el-input>
        </el-form-item>

        <el-form-item label="身份证证面(头像)" prop="idCardPositive" label-width="150px">
          <el-upload
            :disabled="!showEditBtn"
            class="avatar-uploader"
            :action="upladUrl"
            :show-file-list="false"
            :on-success="idCardPositiveHandle"
            :before-upload="handlePreview"
          >
            <el-image v-if="formData.idCardPositive" :src="formData.idCardPositive" class="avatar"></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="身份证反面(国徽))" prop="idCardReverse" label-width="150px">
          <el-upload
            :disabled="!showEditBtn"
            class="avatar-uploader"
            :action="upladUrl"
            :show-file-list="false"
            :on-success="idCardReverseHandle"
            :before-upload="handlePreview"
          >
            <el-image v-if="formData.idCardReverse" :src="formData.idCardReverse" class="avatar"></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <div class="title">
          开户银行信息
        </div>
        <el-form-item label="开户行" prop="bankName" label-width="150px">
          <el-input :disabled="!showEditBtn" v-model="formData.bankName"></el-input>
        </el-form-item>
        <el-form-item label="开户行名称" prop="branchName" label-width="150px">
          <el-input :disabled="!showEditBtn" v-model="formData.branchName"></el-input>
        </el-form-item>
        <el-form-item label="开户行账号" prop="bankAccount" label-width="150px">
          <el-input :disabled="!showEditBtn" oninput="value=value.replace(/[^\d]/g,'')" maxlength="30" v-model="formData.bankAccount"></el-input>
        </el-form-item>
        <el-form-item label="银行开户许可证" prop="openAccLicenceUrl" label-width="150px">
          <el-upload
            :disabled="!showEditBtn"
            class="upload"
            :action="upladUrl"
            :file-list="fileLists.openAccLicenceUrl"
            :on-success="openAccLicenceUrlHandle"
            :before-upload="handlePreview"
            :on-preview="previewFile"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :multiple="false"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">上传文件</el-button>
            <div slot="tip" class="el-upload__tip">加盖公司公章，支持pdf、png、jpg格式文件，大小需小于5M</div>
          </el-upload>
        </el-form-item>
        <div class="title">
          入驻合同
        </div>
        <el-form-item label="合同" prop="contractUrl" label-width="150px">
          <el-upload
            :disabled="!showEditBtn"
            class="upload"
            :action="upladUrl"
            :file-list="fileLists.contractUrl"
            :on-success="contractUrlHandle"
            :before-upload="contractUrlBeforeUpload"
            :on-preview="previewFile"
            :on-remove="contractUrlHandleRemove"
            :before-remove="beforeRemove"
            :multiple="false"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">上传文件</el-button>
            <div slot="tip" class="el-upload__tip">加盖公司公章，支持pdf、png、jpg格式文件，大小需小于5M</div>
          </el-upload>
        </el-form-item>
        <div class="title">
          品牌资质
        </div>
        <el-form-item label="授权类型" prop="grantType" label-width="150px">
          <el-radio-group :disabled="!showEditBtn" v-model="formData.grantType">
            <el-radio label="SELF">自有品牌</el-radio>
            <el-radio label="AUTH">授权品牌</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="品牌名称" prop="brandName" label-width="150px">
          <el-select :disabled="!showEditBtn" v-model="formData.brandName" placeholder="请选择品牌" @change="searchBlur">
            <el-option v-for="item in brandSelectOption" :key="item.brandId" :label="item.brandName" :value="{ value: item.brandId, label: item.brandName }"> </el-option>
          </el-select>
          <!-- 品牌库中没有要提交的品牌，点此 <el-link type="primary" @click="addBrand()">添加</el-link> -->
        </el-form-item>
        <el-form-item label="品牌主营类目" prop="brandCategoryId" label-width="150px">
          <el-select :disabled="!showEditBtn" v-model="formData.brandCategoryId" placeholder="请选择">
            <el-option v-for="item in backCategory" :key="item.catId" :label="item.name" :value="item.catId"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商标注册证" prop="tradeMarkUrl" label-width="150px">
          <el-upload
            class="upload"
            :disabled="!showEditBtn"
            :action="upladUrl"
            :file-list="fileLists.tradeMarkUrl"
            :on-success="tradeMarkUrlHandle"
            :before-upload="beforeUpload"
            :on-remove="tradeMarkUrlhandleRemove"
            :on-preview="previewFile"
            :multiple="true"
            :limit="15"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">上传文件</el-button>
            <div slot="tip" class="el-upload__tip">加盖公司公章，支持pdf、png、jpg格式文件，大小需小于5M</div>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="brandAuthShow" label="品牌授权书" prop="brandAuthUrl" label-width="150px">
          <el-upload
            class="upload"
            :disabled="!showEditBtn"
            :action="upladUrl"
            :file-list="fileLists.brandAuthUrl"
            :on-success="brandAuthUrlHandle"
            :before-upload="beforeUpload"
            :on-remove="brandAuthUrlHandleRemove"
            :on-preview="previewFile"
            :multiple="true"
            :limit="15"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">上传文件</el-button>
            <div slot="tip" class="el-upload__tip">加盖公司公章，支持pdf、png、jpg格式文件，大小需小于5M</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="类目特殊资质" prop="categoryUrl" label-width="150px">
          <el-upload
            class="upload"
            :disabled="!showEditBtn"
            :action="upladUrl"
            :file-list="fileLists.categoryUrl"
            :on-success="categoryUrlHandle"
            :before-upload="beforeUpload"
            :on-remove="categoryUrlHandleRemove"
            :on-preview="previewFile"
            :multiple="false"
            :limit="5"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">上传文件</el-button>
            <div slot="tip" class="el-upload__tip">加盖公司公章，支持pdf、png、jpg格式文件，大小需小于5M</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="质检报告" prop="qualityReportUrl" label-width="150px">
          <el-upload
            class="upload"
            :disabled="!showEditBtn"
            :action="upladUrl"
            :file-list="fileLists.qualityReportUrl"
            :on-success="qualityReportUrlHandle"
            :before-upload="beforeUpload"
            :on-remove="qualityReportUrlHandleRemove"
            :on-preview="previewFile"
            :multiple="false"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">上传文件</el-button>
            <div slot="tip" class="el-upload__tip">加盖公司公章，支持pdf、png、jpg格式文件，大小需小于5M</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="其他资质证明" prop="otherQualityUrl" label-width="150px">
          <el-upload
            class="upload"
            :disabled="!showEditBtn"
            :action="upladUrl"
            :file-list="fileLists.otherQualityUrl"
            :on-success="otherQualityUrlHandle"
            :before-upload="beforeUpload"
            :on-remove="otherQualityUrlHandleRemove"
            :on-preview="previewFile"
            :multiple="false"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">上传文件</el-button>
            <div slot="tip" class="el-upload__tip">加盖公司公章，支持pdf、png、jpg格式文件，大小需小于5M</div>
          </el-upload>
        </el-form-item>
        <div class="title">
          其他信息
        </div>
        <el-form-item label="主题公司" prop="mainCompany" label-width="150px">
          <el-input :disabled="!showEditBtn" v-model="formData.mainCompany"></el-input>
        </el-form-item>
        <el-form-item label="合同编号" prop="contractNo" label-width="150px">
          <el-input :disabled="!showEditBtn" v-model="formData.contractNo"></el-input>
        </el-form-item>
        <el-form-item label-width="150px">
          <el-button class="next-btn" type="primary" plain @click="backList">返回</el-button>
          <el-button v-if="showEditBtn" :loading="loading" class="next-btn" type="primary" plain @click="submitUpdateApply">保存</el-button>
        </el-form-item>
      </el-form>
      <div v-if="$route.query.origin == 'jumpFromArchiveModifyList'">
      <div class="title">审核日志</div>
        <el-table :data="auditRecordList" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
            <el-table-column align="center" prop="auditNode" label="审核节点" min-width="100"></el-table-column>
            <el-table-column align="center" prop="auditor" label="审核人" min-width="100"></el-table-column>
            <el-table-column align="center" prop="createdAt" label="审核时间" min-width="100">
            <template slot-scope="scope">
                <span>{{formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
            </el-table-column>
            <el-table-column align="center" prop="auditResult" label="审核结果" min-width="100"></el-table-column>
            <el-table-column align="center" prop="auditRemark" label="审核意见" min-width="100"></el-table-column>
        </el-table>
      </div>
    </div>
    
  </div>
</template>
<script>
// import { debounce } from '@/utils/config'
import city from '@/utils/city'
import { auditRecord, goodsDiffRecord } from '@/api/merchantsys/goods'
import { joinPerson, accountDetailByProcessId, backGoodsCategory, updateMerchantInfo, shopUpdateApplyDetail, mdBrandList } from '@/api/merchantsys/merchant'
export default {
  name: 'ShopDetail',
  metaInfo() {
    return {
      titleTemplate: '入驻 - %s'
    }
  },
  props: {
    processId: String
  },
  computed: {
    taxTypeShow() {
      return this.formData.taxType == 'GENERAL' ? true : false
    },
    brandAuthShow() {
      return this.formData.grantType == 'AUTH' ? true : false
    }
  },
  data() {
    //对接人校验
    var checkJoinPerson = (rule, value, callback) => {
      if (this.formData.haveJoin && (!value||!this.formData.joinPerson)) {
        return callback(new Error('请选择对接招商人员'))
      }
      return callback()
    }
    //手机号校验
    var checkMobile = (rule, value, callback) => {
      const reg = new RegExp(/^1[3|4|5|6|7|8|9]\d{9}$/, 'g')
      if (!value) {
        return callback(new Error('联系人手机不能为空'))
      }
      if (!reg.test(value)) {
        return callback(new Error('手机号码格式错误'))
      }
      return callback()
    }
    //营业执照
    var checkBusinessLicenseUrl = (rule, value, callback) => {
      if (this.formData.businessLicenseUrl == '') {
        return callback(new Error('请上传营业执照'))
      }
      return callback()
    }
    var checkTaxUrl = (rule, value, callback) => {
      if (this.formData.taxType == 'GENERAL' && this.formData.taxUrl == '') {
        return callback(new Error('请上传一般纳税人资质'))
      }
      return callback()
    }
    //身份证正面
    var checkIdCardPositive = (rule, value, callback) => {
      if (this.formData.idCardPositive == '') {
        return callback(new Error('请上传身份证正面'))
      }
      return callback()
    }
    //身份证正面
    var checkIdCardReverse = (rule, value, callback) => {
      if (this.formData.idCardReverse == '') {
        return callback(new Error('请上传身份证反面'))
      }
      return callback()
    }
    //身份证号
    var checkIdNum = (rule, value, callback) => {
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (!value) {
        return callback(new Error('身份证号不能为空'))
      } else if (!reg.test(value)) {
        return callback(new Error('身份证号格式错误'))
      } else {
        return callback()
      }
    }
    return {
      changeDataDetail: {},
      goodsDiffList: [],
      changelVisible: false,
      auditRecordList: [],
      showEditBtn: false,
      taxUrlShow: true,
      cityAddress: [],
      cityOptions: city,
      settleCycleSelect: [
        {
          value: 0,
          label: '月结'
        },
        {
          value: 1,
          label: '半月结'
        }
      ],
      //企业性质
      companyNatureOptions: [
        {
          value: 'state',
          label: '国有企业'
        },
        {
          value: 'self',
          label: '私营企业'
        },
        {
          value: 'join',
          label: '合资企业'
        }
      ],
      //企业类型
      companyTypeOptions: [
        {
          value: 'personal',
          label: '个人独资企业'
        },
        {
          value: 'join',
          label: '合伙企业'
        },
        {
          value: 'company',
          label: '公司制企业'
        },
        {
          value: 'business',
          label: '个体工商户'
        }
      ],
      url: '',
      fileLists: {
        businessLicenseUrl: [],
        taxUrl: [],
        openAccLicenceUrl: [],
        categoryUrl: [],
        brandAuthUrl: [],
        tradeMarkUrl: [],
        qualityReportUrl: [],
        otherQualityUrl: [],
        contractUrl: []
      },
      loading: false,
      formRules: {
        companyName: [
          { required: true, message: '企业名称不能为空', trigger: 'blur' },
          { max: 50, message: '企业名称最大字符50', trigger: 'blur' }
        ],
        socialCreditCode: [
          { required: true, message: '统一社会信用代码不能为空', trigger: 'blur' },
          { max: 18, message: '统一社会信用代码最大字符18', trigger: 'blur' }
        ],
        location: [{ required: true, message: '请选择企业所在地', trigger: 'blur' }],
        detailAddress: [
          { required: true, message: '详细地址不能为空', trigger: 'blur' },
          { max: 100, message: '详细地址最大字符100', trigger: 'blur' }
        ],
        haveJoin: [{ required: true }],
        joinPerson: [{ required: true, validator: checkJoinPerson, trigger: 'change' }],
        companyNature: [{ required: true, message: '请选择企业性质', trigger: 'change' }],
        companyType: [{ required: true, message: '请选择企业类型', trigger: 'change' }],
        contact: [
          { required: true, message: '联系人不能为空', trigger: 'blur' },
          { max: 10, message: '联系人最大字符10', trigger: 'blur' }
        ],
        position: [
          { required: true, message: '联系人职位不能为空', trigger: 'blur' },
          { max: 10, message: '联系人职位最大字符10', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { max: 100, message: '邮箱最大字符100', trigger: 'blur' },
          { type: 'email', message: '邮箱格式错误', trigger: 'blur' }
        ],
        mobile: [{ required: true, validator: checkMobile, trigger: 'blur' }],
        //企业信息
        businessLicenseUrl: [{ required: true, validator: checkBusinessLicenseUrl, trigger: 'blur' }],
        taxType: [{ required: true, message: '纳税人类型不能为空', trigger: 'change' }],
        taxUrl: [{ required: true, validator: checkTaxUrl, trigger: 'blur' }],
        registerCapital: [{ required: true, message: '注册资金不能为空', trigger: 'blur' }],
        //法人信息
        realName: [
          { required: true, message: '企业法人不能为空', trigger: 'blur' },
          { max: 10, message: '最大长度10', trigger: 'blur' }
        ],
        idNumber: [{ required: true, validator: checkIdNum, trigger: 'blur' }],
        idCardPositive: [{ required: true, validator: checkIdCardPositive, trigger: 'blur' }],
        idCardReverse: [{ required: true, validator: checkIdCardReverse, trigger: 'blur' }],
        //开户银行信息
        bankName: [{ required: true, message: '开户行不能为空', trigger: 'blur' }],
        branchName: [{ required: true, message: '开户行名称不能为空', trigger: 'blur' }],
        bankAccount: [{ required: true, message: '开户行账户不能为空', trigger: 'blur' }],
        //品牌资质
        grantType: [{ required: true, message: '授权类型不能为空', trigger: 'change' }],
        brandCategoryId: [{ required: true, message: '请求选择主营类目', trigger: 'change' }],
        tradeMarkUrl: [{ required: true, message: '请上传商标注册证', trigger: 'change' }]
      },
      labelPosition: 'right',
      formData: {
        accountId: null,
        companyName: null,
        companyNature: null,
        companyType: null,
        contact: null,
        detailAddress: null,
        email: null,
        haveJoin: false,
        joinPerson: null,
        location: null,
        mobile: null,
        position: null,
        socialCreditCode: null,
        bankAccount: null,
        bankName: null,
        branchName: null,
        brandAuthUrl: null,
        brandCategoryId: null,
        brandId: null,
        brandName: null,
        businessLicenseUrl: null,
        categoryUrl: null,
        contractUrl: null,
        grantType: 'SELF',
        idCardPositive: null,
        idCardReverse: null,
        idNumber: null,
        openAccLicenceUrl: null,
        otherQualityUrl: null,
        qualityReportUrl: null,
        realName: null,
        registerCapital: null,
        taxType: 'GENERAL',
        taxUrl: null,
        tradeMarkUrl: null,
        fileDeletes: []
      },
      backCategory: [],
      joinPersons: [],
      //品牌下拉
      brandSelectOption: []
    }
  },
  filters:{
    changeFieldType(item, type){
      let field = item.field
      let beforeValue = item.beforeValue
      let afterValue = item.afterValue
      if(field=='companyNature'){
        switch(item.beforeValue){
          case 'state': beforeValue = '国有企业'; break;
          case 'self': beforeValue = '私营企业'; break;
          case 'join': beforeValue = '合资企业'; break;
          default : 'state'
        }
      }else if(field=='companyType'){
        switch(item.beforeValue){
          case 'personal': beforeValue = '个人独资企业'; break;
          case 'join': beforeValue = '合伙企业'; break;
          case 'company': beforeValue = '公司制企业'; break;
          case 'business': beforeValue = '个体工商户'; break;
          default : 'personal'
        }
      }
      else if(field=='taxType'){
        switch(item.beforeValue){
          case 'GENERAL': beforeValue = '一般纳税人'; break;
          case 'SMALL': beforeValue = '小规模纳税人'; break;
          default : 'SMALL'
        }
      }
      if(field=='companyNature'){
        switch(item.afterValue){
          case 'state': afterValue = '国有企业'; break;
          case 'self': afterValue = '私营企业'; break;
          case 'join': afterValue = '合资企业'; break;
          default : 'state'
        }
      }else if(field=='companyType'){
        switch(item.afterValue){
          case 'personal': afterValue = '个人独资企业'; break;
          case 'join': afterValue = '合伙企业'; break;
          case 'company': afterValue = '公司制企业'; break;
          case 'business': afterValue = '个体工商户'; break;
          default : 'personal'
        }
      }
      else if(field=='taxType'){
        switch(item.afterValue){
          case 'GENERAL': afterValue = '一般纳税人'; break;
          case 'SMALL': afterValue = '小规模纳税人'; break;
          default : 'GENERAL'
        }
      }
      return { ordinary: type=='before'?beforeValue:afterValue, file: '图文变更', json: '列表变更' }[item.fieldType]
    }
  },
  created() {
    //加载品牌列表
    this.loadBrandList()
    //加载招商人员
    this.loadJoinPerson()
    //加载主营类目
    this.loadMainCategory()
    //初始化数据
    this.loadInitData()
  },
  methods: {
    previewFileView(url) {
      window.open(url)
    },
    handleClose(){
      this.changeDataDetail = {}
      this.changelVisible = false
    },
    viewChangeDetail(item){
      this.changelVisible = true
      this.changeDataDetail = item
    },
    addBrand() {
      this.$prompt('新增品牌名称', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[a-zA-Z]{3,15}|[\u4e00-\u9fa5]{3,15}$/,
        inputErrorMessage: '长度3到18个字符'
      })
        .then(({ value }) => {
          if (value.length > 15) {
            this.$message({
              type: 'error',
              message: '长度不能超过15个字符'
            })
            return
          }

          this.formData.brandName = value
          this.formData.brandId = null
        })
    },
    backList() {
      if (this.$route.query.origin == 'jumpFromBaseInfoList') {
        this.$router.push({ name: 'baseList' })
      }
      if (this.$route.query.origin == 'jumpFromEntryApplyList') {
        this.$router.push({ name: 'applyList' })
      }
      if (this.$route.query.origin == 'jumpFromArchiveModifyList') {
        this.$router.push({ name: 'modifyList' })
      }
    },
    submitUpdateApply() {
      this.$refs.formData.validate(valid => {
        if (!valid) {
          return false
        }
        this.loading = true
        //保存
        updateMerchantInfo(this.formData)
          .then(res => {
            console.log(res)
            if (res.code !== 200) {
              this.loading = false
              return
            }
            this.showEditBtn = false
            this.$message({
              message: '保存成功',
              type: 'success',
              duration: 3 * 1000
            })
            this.backList()
          })
          .catch(() => (this.loading = false))
        return
      })
    },
    //上传营业执照成功回调
    businessLicenseUrlHandle(res, file) {
      console.log(file)
      const { filePath } = res
      this.formData.businessLicenseUrl = filePath
      this.$refs.formData.clearValidate(['businessLicenseUrl'])
    },
    //一般纳税人资质
    taxUrlHandle(res, file) {
      console.log(file)
      const { filePath } = res
      this.formData.taxUrl = filePath
      this.$refs.formData.clearValidate(['taxUrl'])
    },
    //身份证正面
    idCardPositiveHandle(res, file) {
      console.log(file)
      const { filePath } = res
      this.formData.idCardPositive = filePath
      this.$refs.formData.clearValidate(['idCardPositive'])
    },
    //身份证反面
    idCardReverseHandle(res, file) {
      console.log(file)
      const { filePath } = res
      this.formData.idCardReverse = filePath
      this.$refs.formData.clearValidate(['idCardReverse'])
    },
    //银行开户许可证
    openAccLicenceUrlHandle(res, file) {
      console.log(file)
      const { filePath } = res
      this.formData.openAccLicenceUrl = filePath
    },
    //商标注册证
    tradeMarkUrlHandle(res, file) {
      const { filePath } = res
      this.fileLists.tradeMarkUrl.push({ name: file.name, url: filePath })
      let arr = []
      this.fileLists.tradeMarkUrl.forEach(element => {
        arr.push(element.url)
      })
      this.formData.tradeMarkUrl = arr.join(';')
      this.$refs.formData.clearValidate(['tradeMarkUrl'])
    },
    //删除商标注册证
    tradeMarkUrlhandleRemove(file) {
      this.fileLists.tradeMarkUrl.forEach((element, index) => {
        if (file.url == element.url) {
          this.formData.fileDeletes.push(file.url)
          this.fileLists.tradeMarkUrl.splice(index, 1)
          if (this.fileLists.tradeMarkUrl.length > 0) {
            let arr = []
            this.fileLists.tradeMarkUrl.forEach(element => {
              arr.push(element.url)
            })
            this.formData.tradeMarkUrl = arr.join(';')
          } else {
            this.formData.tradeMarkUrl = null
          }
          return
        }
      })
    },
    //品牌授权书
    brandAuthUrlHandle(res, file) {
      const { filePath } = res
      this.fileLists.brandAuthUrl.push({ name: file.name, url: filePath })
      let arr = []
      this.fileLists.brandAuthUrl.forEach(element => {
        arr.push(element.url)
      })
      this.formData.brandAuthUrl = arr.join(';')
      this.$refs.formData.clearValidate(['brandAuthUrl'])
    },
    brandAuthUrlHandleRemove(file) {
      this.fileLists.brandAuthUrl.forEach((element, index) => {
        if (file.url == element.url) {
          this.formData.fileDeletes.push(file.url)
          this.fileLists.brandAuthUrl.splice(index, 1)
          if (this.fileLists.brandAuthUrl.length > 0) {
            let arr = []
            this.fileLists.brandAuthUrl.forEach(element => {
              arr.push(element.url)
            })
            this.formData.brandAuthUrl = arr.join(';')
          } else {
            this.formData.brandAuthUrl = null
          }
          return
        }
      })
    },
    //类目资质
    categoryUrlHandle(res, file) {
      const { filePath } = res
      this.fileLists.categoryUrl.push({ name: file.name, url: filePath })
      let arr = []
      this.fileLists.categoryUrl.forEach(element => {
        arr.push(element.url)
      })
      this.formData.categoryUrl = arr.join(';')
      this.$refs.formData.clearValidate(['categoryUrl'])
    },
    categoryUrlHandleRemove(file) {
      this.fileLists.categoryUrl.forEach((element, index) => {
        if (file.url == element.url) {
          this.fileLists.categoryUrl.splice(index, 1)
          if (this.fileLists.categoryUrl.length > 0) {
            let arr = []
            this.fileLists.categoryUrl.forEach(element => {
              arr.push(element.url)
            })
            this.formData.categoryUrl = arr.join(';')
          } else {
            this.formData.categoryUrl = null
          }
          return
        }
      })
    },
    //质检报告
    qualityReportUrlHandle(res, file) {
      console.log(file)
      const { filePath } = res
      this.formData.qualityReportUrl = filePath
    },
    qualityReportUrlHandleRemove() {
      this.fileLists.qualityReportUrl = []
      this.formData.qualityReportUrl = null
    },
    //其他资质证明
    otherQualityUrlHandle(res, file) {
      console.log(file)
      const { filePath } = res
      this.formData.otherQualityUrl = filePath
    },
    otherQualityUrlHandleRemove() {
      this.fileLists.otherQualityUrl = []
      this.formData.otherQualityUrl = null
    },
    //其他资质证明
    contractUrlHandle(res, file) {
      console.log(file)
      const { filePath } = res
      this.formData.contractUrl = filePath
    },
    contractUrlHandleRemove() {
      this.fileLists.contractUrl = []
      this.formData.contractUrl = null
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      const isLegalFormat = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLegalFormat) {
        this.$message.error('上传文件只支持pdf、png、jpg格式文件')
        return false
      }
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过 5MB!')
        return false
      }
      return true
    },
    contractUrlBeforeUpload(file) {
      const excelxls = file.name.split('.')[1] === 'xls'
      const excelxlsx = file.name.split('.')[1] === 'xlsx'
      const doc = file.name.split('.')[1] === 'doc'
      const isLegalFormat = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf' || excelxls || excelxlsx || doc
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLegalFormat) {
        this.$message.error('上传文件只支持pdf,png,jpg,xls,xlsx,doc格式文件')
        return false
      }
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过 5MB!')
        return false
      }
      return true
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      console.log(file, fileList)
    },
    searchBlur(params) {
      const { value, label } = params
      this.formData.brandId = value
      this.formData.brandName = label
    },
    //加载后台商品分类
    loadMainCategory() {
      backGoodsCategory().then(res => {
        this.backCategory = res.data
      })
    },
    //加载品牌列表
    loadBrandList() {
      mdBrandList().then(res => {
        this.brandSelectOption = res.data
      })
    },
    //招商人员
    loadJoinPerson() {
      joinPerson().then(res => {
        this.joinPersons = res.data
      })
    },
    //省市区级联
    handleChange(value) {
      this.formData.location = value.join('/')
    },
    previewFile(file) {
      window.open(file.url)
    },
    getExtendName(url) {
      return url.substring(url.lastIndexOf('.'))
    },
    loadAuditRecord(){
      if(this.formData.processId){
        auditRecord({audit_process_id: this.formData.processId}).then(res=>{
          this.auditRecordList = res.data
        })
        goodsDiffRecord({audit_process_id: this.formData.id}).then(res=>{
          this.goodsDiffList = res.data
        })
      }
      
    },
    //详情
    loadInitData() {
      if (this.$route.query.type == 'modify') {
        this.showEditBtn = true
      }
      //加载中台档案详情
      if (this.$route.query.origin == 'jumpFromBaseInfoList' || this.$route.query.origin == 'jumpFromEntryApplyList') {
        accountDetailByProcessId({ process_id: this.$route.params.processId }).then(res => {
          this.formData = res.data
          this.formData.fileDeletes = []
          if (this.formData.businessLicenseUrl) {
            this.fileLists.businessLicenseUrl.push({ name: '营业执照附件' + this.getExtendName(this.formData.businessLicenseUrl), url: this.formData.businessLicenseUrl })
          }
          if (this.formData.taxUrl) {
            this.fileLists.taxUrl.push({ name: '纳税人资质附件' + this.getExtendName(this.formData.taxUrl), url: this.formData.taxUrl })
          }
          if (this.formData.openAccLicenceUrl) {
            this.fileLists.openAccLicenceUrl.push({ name: '银行开户许可证附件' + this.getExtendName(this.formData.openAccLicenceUrl), url: this.formData.openAccLicenceUrl })
          }
          if (this.formData.tradeMarkUrl) {
            let arr = this.formData.tradeMarkUrl.split(';') || []
            arr.forEach((item, index) => {
              this.fileLists.tradeMarkUrl.push({ name: '商标注册证附件' + ++index + this.getExtendName(item), url: item })
            })
          }
          if (this.formData.brandAuthUrl) {
            let arr = this.formData.brandAuthUrl.split(';')
            arr.forEach((item, index) => {
              this.fileLists.brandAuthUrl.push({ name: '品牌授权书附件' + ++index + this.getExtendName(item), url: item })
            })
          }
          if (this.formData.categoryUrl) {
            this.fileLists.categoryUrl.push({ name: '类目特殊资质附件' + this.getExtendName(this.formData.categoryUrl), url: this.formData.categoryUrl })
          }
          if (this.formData.otherQualityUrl) {
            this.fileLists.otherQualityUrl.push({ name: '其他资质附件' + this.getExtendName(this.formData.otherQualityUrl), url: this.formData.otherQualityUrl })
          }
          if (this.formData.qualityReportUrl) {
            this.fileLists.qualityReportUrl.push({ name: '质检报告附件' + this.getExtendName(this.formData.qualityReportUrl), url: this.formData.qualityReportUrl })
          }
          if (this.formData.contractUrl) {
            this.fileLists.contractUrl.push({ name: '合同附件' + this.getExtendName(this.formData.contractUrl), url: this.formData.contractUrl })
          }
          if (res.data.location) {
            this.cityAddress = res.data.location.split('/')
          }
        })
        return
      }
      if (this.$route.query.origin == 'jumpFromArchiveModifyList') {
        //加载变更档案详情
        shopUpdateApplyDetail({ process_id: this.processId }).then(res => {
          this.formData = res.data
          console.log(this.formData)
          if(!res.data.haveJoin && res.data.joinPerson){
            this.formData.haveJoin = true
          }
          this.loadAuditRecord()
          if (res.data.location != '') {
            this.cityAddress = res.data.location.split('/')
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.merchant-detail-container{
  padding:20px;
    .register-main{
      .img-class{
        width: 200px;
        height: 200px;
      }
      .operate-btn{
        margin-bottom: 10px;
      }
      .title{
        font-size: 18px;
        color: black;
        font-weight: bold;
        line-height: 38px;
        margin-bottom: 10px;
      }
      .el-form-item{
        .next-btn{
          width: 150px;
        }
        .el-input{
          width: 420px;
        }
        .upload{
          width: 450px;
        }
      }
    }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
}

</style>
